<template>
  <div class="pagination-container">
    <!-- 控制台输出展示板块 -->
    <div class="console-output">
      <h4>控制台输出:</h4>
      <ul v-if="consoleMessages.length > 0">
        <li v-for="(message, index) in consoleMessages" :key="index">{{ message }}</li>
      </ul>
    </div>
    <div class="pagination-info">
      <span>共 {{ total }} 条</span>
      <div class="page-size-selector">
        <select id="pageSizeSelect" v-model="pageSize" @change="handlePageSizeChange">
          <option v-for="size in pageSizeOptions" :key="size" :value="size">
            {{ size }} 条/页
          </option>
        </select>
      </div>
    </div>
    <div class="pagination-controls"  v-if="totalPages > 1">
      <button 
        class="pagination-btn" 
        :disabled="currentPage === 1" 
        @click="prevPage"
        title="上一页"
      >
        &lt;
      </button>
      
      <div class="page-numbers">
        <button
          v-if="showFirstPageButton"
          class="page-number"
          @click="goToPage(1)"
          title="首页"
        >
          1
        </button>
        <span v-if="showFirstEllipsis" class="ellipsis">...</span>
        
        <button
          v-for="page in visiblePages"
          :key="page"
          class="page-number"
          :class="{ active: page === currentPage }"
          @click="goToPage(page)"
        >
          {{ page }}
        </button>
        
        <span v-if="showLastEllipsis" class="ellipsis">...</span>
        <button
          v-if="showLastPageButton"
          class="page-number"
          @click="goToPage(totalPages)"
          title="末页"
        >
          {{ totalPages }}
        </button>
      </div>
      
      <button 
        class="pagination-btn" 
        :disabled="currentPage === totalPages || totalPages === 0" 
        @click="nextPage"
        title="下一页"
      >
        &gt;
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  data() {
    return {
      total: 100,
      pageSize: 10,
      currentPage: 1,
      pageSizeOptions: [5, 10, 20, 50, 100],
      abortController: null,
      consoleMessages: []
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize) || 1;
    },
    visiblePages() {
      const pages = [];
      const pageCount = 4;
      const halfPageCount = Math.floor(pageCount / 2);
      
      let startPage = Math.max(1, this.currentPage - halfPageCount);
      let endPage = Math.min(this.totalPages, startPage + pageCount - 1);
      
      if (endPage - startPage + 1 < pageCount) {
        startPage = Math.max(1, endPage - pageCount + 1);
      }
      
      for (let i = startPage; i <= endPage; i++) {
        pages.push(i);
      }
      
      return pages;
    },
    showFirstPageButton() {
      return this.visiblePages.length > 0 && this.visiblePages[0] > 1;
    },
    showLastPageButton() {
      return this.visiblePages.length > 0 && this.visiblePages[this.visiblePages.length - 1] < this.totalPages;
    },
    showFirstEllipsis() {
      return this.showFirstPageButton && this.visiblePages[0] > 2;
    },
    showLastEllipsis() {
      return this.showLastPageButton && this.visiblePages[this.visiblePages.length - 1] < this.totalPages - 1;
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.simulatePageChange(this.currentPage - 1);
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.simulatePageChange(this.currentPage + 1);
      }
    },
    goToPage(page) {
      if (page >= 1 && page <= this.totalPages && page !== this.currentPage) {
        this.addConsoleMessage(`点击第${page}页按钮，当前页: ${page}`);
        this.simulatePageChange(page);
      }
    },
    handlePageSizeChange() {
      this.addConsoleMessage(`更改页面大小为: ${this.pageSize} 条/页`);
      this.currentPage = 1;
    },
    beforeDestroy() {
      if (this.abortController) {
        this.abortController.abort();
        this.abortController = null;
      }
    },
    simulatePageChange(page) {
      this.currentPage = page;
      
      if (this.abortController) {
        this.abortController.abort();
        this.abortController = null;
      }
      
      this.abortController = new AbortController();
      const { signal } = this.abortController;
      
      let delay = 0;
      if (page === 2) {
        delay = 3000; 
      } else if (page === 3) {
        delay = 1000;
      }
      
      const timer = setTimeout(() => {
        if (!signal.aborted) {
          let message = "";
          if (page === 2) {
            message = "第2页数据加载完成";
          } else if (page === 3) {
            message = "第3页数据加载完成";
          }
        }
        this.abortController = null;
      }, delay);
      
      signal.addEventListener('abort', () => {
        clearTimeout(timer);
        this.addConsoleMessage(`第${page}页请求已被取消`);
      });
    },
    addConsoleMessage(message) {
      // 添加时间戳
      const timestamp = new Date().toLocaleTimeString();
      this.consoleMessages.unshift(`[${timestamp}] ${message}`);
      
      // 限制消息数量，只保留最近的10条消息
      if (this.consoleMessages.length > 10) {
        this.consoleMessages = this.consoleMessages.slice(0, 10);
      }
    }
  }
};
</script>

<style scoped>
.pagination-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background-color: #333;
  border-radius: 8px;
  color: #e0e0e0;
  font-size: 14px;
  flex-wrap: wrap;
  gap: 10px;
}

.pagination-info {
  display: flex;
  align-items: center;
  gap: 15px;
  white-space: nowrap;
}

.page-size-selector {
  display: flex;
  align-items: center;
  gap: 5px;
}

.page-size-selector label {
  font-size: 14px;
}

.page-size-selector select {
  background-color: #555;
  color: #e0e0e0;
  border: 1px solid #666;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
}

.page-size-selector select:focus {
  outline: none;
  border-color: #007bff;
}

.console-output {
  padding: 0;
  margin: 10px 0;
  max-height: 150px;
  overflow-y: auto;
  width: 100%;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.console-output::-webkit-scrollbar {
  width: 0px;
  background: transparent; /* Chrome/Safari/Webkit */
}

.console-output h4 {
  margin: 0 0 8px 0;
  color: #3498db;
  font-size: 14px;
}

.console-output ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.console-output li {
  padding: 4px 0;
  border-bottom: 1px solid #444;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 13px;
  color: #bbeffd;
}

.console-output li:last-child {
  border-bottom: none;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #555;
  color: #e0e0e0;
  border: 1px solid #666;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.pagination-btn:hover:not(:disabled) {
  background-color: #666;
}

.pagination-btn:disabled {
  background-color: #444;
  color: #888;
  cursor: not-allowed;
}

.page-numbers {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.page-number {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #555;
  color: #e0e0e0;
  border: 1px solid #666;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.page-number:hover:not(:disabled) {
  background-color: #666;
}

.page-number.active {
  background-color: #007bff;
  border-color: #007bff;
  color: white;
}

.ellipsis {
  padding: 0 5px;
  color: #888;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .pagination-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .pagination-controls {
    justify-content: center;
  }
  
  .pagination-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
</style>